<!DOCTYPE html>
<html lang="zh-CN">
   {include file='index/header' /}
<body class="sticky-header">

<section>
    <!-- left side start-->
     {include file='index/menu' /}
    <!-- left side end-->
    <!-- main content start-->    

    <div class="main-content" >

        <!-- header section start-->
        {include file='index/header_section' /}
        <!-- header section end-->

        <!--body wrapper start-->
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                            <h4 class="modal-title">填写信息</h4>
                        </div>

                        <section class="panel">
                            <div class="panel-body" id="popping">
                                <form role="form">
                                     <div class="form-group" >
                                        <label for="id_id">id</label>
                                        <input type="text" class="form-control" id="id_id" placeholder="id" disabled="disabled" >
                                    </div>
                                     <div class="form-group" >
                                        <label for="id_fid">父id</label>
                                        <input type="text" class="form-control" id="id_fid" placeholder="父id">
                                    </div>
                                     <div class="form-group" >
                                        <label for="id_name">菜单名称</label>
                                        <input type="text" class="form-control" id="id_name" placeholder="菜单名称">
                                    </div>
                                    <div class="form-group" >
                                        <label for="id_controller">控制器和方法</label>
                                        <input type="text" class="form-control" id="id_controller" placeholder="控制器和方法">
                                    </div>
                                    <div class="form-group" >
                                        <label for="id_controller">菜单等级</label>
                                        <input type="text" class="form-control" id="id_leave" placeholder="登录">
                                    </div>
                                    <div class="form-group" >
                                        <label for="id_display">是否显示</label>
                                        <input type="text" class="form-control" id="id_display" placeholder="是否显示">
                                    </div>
                                    <center><button type="button" id="saveBtn" class="btn btn-primary">保存</button></center>
                                </form>

                            </div>
                        </section>
                    </div>
                </div>
            </div>
                 <div class="wrapper">
                     <div class="row">
                         <div class="col-sm-12">
                             <section class="panel">
                                 <div class="panel-body">
                                     <div class="adv-table editable-table ">
                                         <div class="clearfix">
                                            <div class="btn-group">
                                                <button id="newBtn" class="btn btn-primary">
                                                    新增 <i class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="space15"></div>
                                        <table class="table table-striped table-hover table-bordered" id="editable-sample">
                                            <thead>
                                                <tr>
                                                    <th>id</th> 
                                                    <th>父id</th> 
                                                    <th>菜单名称</th> 
                                                    <th>控制器和方法</th>
                                                    <th>等级</th>
                                                    <th>是否显示</th>
                                                    <th>操作</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {volist name="list" id ="vo" }
                                                <tr class="">
                                                    <td>{$vo.id}</td>
                                                    <td>{$vo.fid}</td>
                                                    <td>{$vo.name}</td>
                                                    <td>{$vo.controller}</td>
                                                    <td>{$vo.leave}</td>
                                                    <td>{$vo.display}</td>
                                                    <td>
                                                        <a class="edit" href="javascript:;">编辑</a>
                                                        <a class="delete" href="javascript:;">删除</a>
                                                    </td>
                                                </tr>
                                                {/volist}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                             </section>
                         </div>
                     </div>
                 </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <footer>
            2014 &copy; AdminEx by ThemeBucket
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>
<!-- Placed js at the end of the document so the pages load faster -->
<script src="{:PUBLICS}js/jquery-1.10.2.min.js"></script>
<script src="{:PUBLICS}js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="{:PUBLICS}js/jquery-migrate-1.2.1.min.js"></script>
<script src="{:PUBLICS}js/bootstrap.min.js"></script>
<script src="{:PUBLICS}js/modernizr.min.js"></script>
<script src="{:PUBLICS}js/jquery.nicescroll.js"></script>

<!--data table-->
<script type="text/javascript" src="{:PUBLICS}js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="{:PUBLICS}js/data-tables/DT_bootstrap.js"></script>

<!--common scripts for all pages-->
<script src="{:PUBLICS}js/scripts.js"></script>

<!--script for editable table-->
<!--<script src="{:PUBLICS}js/editable-table.js"></script>-->
<script>
jQuery(document).ready(function() {
//    第四处要改，对应数据库的字段名
    var pTitles = [
            "id",
            "fid",
            "name",
            "controller",
            "leave",
            "display",
        ];
    var PRO_COUNT = pTitles.length;
    var EditableTable = function () {

    return {     
        //main function to initiate the module
        init: function () {
            function restoreRow(oTable, nRow) {
                var aData = oTable.fnGetData(nRow);
                var jqTds = $('>td', nRow);

                for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                    oTable.fnUpdate(aData[i], nRow, i, false);
                }

                oTable.fnDraw();
            }
            var oTable = $('#editable-sample').dataTable({
                "aLengthMenu": [
                    [15, 20, -1],
                    [15, 20, "all"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 15,
                "sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>",
                "sPaginationType": "bootstrap",
                "oLanguage": {
                        "sLengthMenu": "_MENU_(条/页)",
                        "sZeroRecords": "暂无数据",
                        "sSearch": "搜索",
                        "sInfo": " _START_ -- _END_ （共 _TOTAL_ 条）",
                        "sInfoEmpty": "",
                        "oPaginate": {
                            "sPrevious": "上一页",
                            "sNext": "下一页"
                        }
                    },
                "aoColumnDefs": [{
                        'bSortable': false,
                        'aTargets': [0]
                    }
                ]
            });

            jQuery('#editable-sample_wrapper .dataTables_filter input').addClass("form-control medium"); // modify table search input
            jQuery('#editable-sample_wrapper .dataTables_length select').addClass("form-control xsmall"); // modify table per page dropdown

            var nEditing = null;

            $('#editable-sample_new').click(function (e) {
                e.preventDefault();
                var aiNew = oTable.fnAddData(['', '', '', '',
                        '<a class="edit" href="">编辑</a>', '<a class="cancel" data-mode="new" href="">取消</a>'
                ]);
                var nRow = oTable.fnGetNodes(aiNew[0]);
                editRow(oTable, nRow);
                nEditing = nRow;
            });

           

            $('#editable-sample a.cancel').live('click', function (e) {
                e.preventDefault();
                if ($(this).attr("data-mode") == "new") {
                    var nRow = $(this).parents('tr')[0];
                    oTable.fnDeleteRow(nRow);
                } else {
                    restoreRow(oTable, nEditing);
                    nEditing = null;
                }
            });
           //删除数据
            function delMenu (mid) {
                    var url = "{:url('Crud/del')}";
//                    第五处要改，table改成对应的表名称
                    var postData = {"id": mid,"table":"menu"};
                    $.post(url, postData, function (data) {
                    });
            }
           
            $('#editable-sample a.delete').live('click', function (e) {
                e.preventDefault();

                if (confirm("你确定要删除吗?") == false) {
                    return;
                }

                var nRow = $(this).parents('tr')[0];
                var delData = oTable.fnGetData(nRow)
                oTable.fnDeleteRow(nRow);
               delMenu(delData[0]);
            });
            
            //添加数据
            function modalAdd(){
                nEditing = null;
                for(var i=0;i<PRO_COUNT;i++){
                            $('#id_'+pTitles[i]).val(" ");
                       }
                $("#myModal").modal();
            }
            
            $('#newBtn').live('click', function (e) {
                 e.preventDefault();
                 modalAdd(); //弹窗添加数据
            });
            //编辑数据
             function modalEdit(nRow) { 
                    nEditing = nRow;
                    var aData = oTable.fnGetData(nRow);
                        for(var i=0;i<PRO_COUNT;i++){
                             $('#id_'+pTitles[i]).val(aData[i]);
                        }
                        $("#myModal").modal();
            }
                
            $('#editable-sample a.edit').live('click', function (e) {
               e.preventDefault();
                var nRow = $(this).parents('tr')[0];
                modalEdit(nRow);    
            });
            //保存数据
            function updateID (data,nRow) {
                oTable.fnUpdate(data.id,nRow,0,false);
            }
            
            function postData(model,nRow,callback){
                var url = "{:url('Crud/save')}";
                var postData = model;
                $.post(url, postData, function (data) {
                    var data1 = $.parseJSON(data);   
                    if (!!callback) {
                        callback(data1,nRow );
                    }
                });
            }
            
            function modalSave(){
                var model = {
                   //改成对应的表名称
                   table:"menu"
                };
                var tds = [""];
                 for(var i = 0 ; i <pTitles.length; i ++) {
                    model[pTitles[i]] = $('#id_'+pTitles[i]).val();  
                    if (nEditing === null) {
                            tds[i] = model[pTitles[i]];
                    } else {
                        oTable.fnUpdate(model[pTitles[i]], nEditing, i, false);
                    }
                 }
                if (nEditing === null) {
                        tds[PRO_COUNT]= '<a class="edit" href="">编辑</a> <a class="delete" href="">删除</a>';
                        var aiNew = oTable.fnAddData(tds);
                        var nRow = oTable.fnGetNodes(aiNew[0]);
                        nEditing = nRow;
                } else {
                    oTable.fnUpdate('<a class="edit" href="">编辑</a> <a class="delete" href="">删除</a>', nEditing, PRO_COUNT, false);
                }
                
                oTable.fnDraw();
                postData(model,nEditing, updateID);
                $('#myModal').modal('hide');
            }
            
            $('#saveBtn').live('click',function(e){
               modalSave(); 
            });
        }

    };

}();

     EditableTable.init();
});
</script>


<!-- END JAVASCRIPTS -->
</body>
</html>
